<template>
	<view class="withdraw">

		<view class="withdraw-header m-b-24">
			<template v-if="withdrawData.type != undefined">
				<u-tabs :list="withdrawData.type" active-color="rgba(64, 115, 250, 1)" :is-scroll="true"
					:current="current" @change="change"></u-tabs>
			</template>
		</view>

		<!-- 微信 -->
		<template v-if="withdrawData.type[current] != undefined">
			<template v-if="withdrawData.type[current].value == 4">
				<view class="withdraw-other m-b-24">
					<u-field label-width="160" v-model="withdraw.account" :label="$zhTran('微信账号')"
						:placeholder="$zhTran('请输入微信账号')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.real_name" :label="$zhTran('真实姓名')"
						:placeholder="$zhTran('请输入真实姓名')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.apply_remark" :label="$zhTran('备注')"
						:placeholder="$zhTran('(选填)')">
					</u-field>

					<view class="m-t-20">
						<uploader :tips="$zhTran('微信收款码')" v-model="withdraw.money_qr_code"></uploader>
					</view>
				</view>
			</template>
		</template>

		<!-- 支付宝 -->
		<template v-if="withdrawData.type[current] != undefined">
			<template v-if="withdrawData.type[current].value == 5">
				<view class="withdraw-other m-b-24">
					<u-field label-width="160" v-model="withdraw.account" :label="$zhTran('支付宝账号')"
						:placeholder="$zhTran('请输入支付宝账号')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.real_name" :label="$zhTran('真实姓名')"
						:placeholder="$zhTran('请输入真实姓名')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.apply_remark" :label="$zhTran('备注')"
						:placeholder="$zhTran('(选填)')">
					</u-field>

					<view class="m-t-20">
						<uploader :tips="$zhTran('支付宝收款码')" v-model="withdraw.money_qr_code"></uploader>
					</view>
				</view>
			</template>
		</template>

		<!-- 银行卡 -->

		<template v-if="withdrawData.type[current] != undefined">
			<template v-if="withdrawData.type[current].value == 3">
				<view class="withdraw-other m-b-24">
					<u-field label-width="160" v-model="withdraw.account" :label="$zhTran('银行卡账号')"
						:placeholder="$zhTran('请输入银行卡账号')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.real_name" :label="$zhTran('持卡人姓名')"
						:placeholder="$zhTran('请输入持卡人姓名')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.bank" :label="$zhTran('提现银行')"
						:placeholder="$zhTran('请输入银行名称')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.subbank" :label="$zhTran('银行支行')"
						:placeholder="$zhTran('如: 金湾银行')">
					</u-field>

					<u-field label-width="160" v-model="withdraw.apply_remark" :label="$zhTran('备注')"
						:placeholder="$zhTran('(选填)')">
					</u-field>
				</view>
			</template>
		</template>

		<view class="withdraw-content">
			<view class="input flex row-between">
				<view class="flex flex-1">
					<text>{{withdrawData.price_symbol}}</text>
					<input type="number" v-model="withdraw.money" placeholder="0.00" />
				</view>

				<view class="xs">
					<text class="all-withdraw flex row-right"
						@click="withdraw.money = withdrawData.able_withdraw">{{$zhTran('全部提现')}}</text>
					<view class="muted m-t-10">{{$zhTran('可提现余额')}} {{withdrawData.price_symbol}}
						{{withdrawData.able_withdraw}}
					</view>
				</view>
			</view>
		</view>

		<view class="withdraw-btn flex row-center br10 lg white" @click="withdrawFun('')">
			{{$zhTran('确认申请')}}
		</view>

		<u-modal v-model="showResult" width="540" :showCancelButton="true" :show-title="false"
			:cancel-text="$zhTran('关闭')" @cancel="backPage" cancel-color="rgba(38, 38, 38, 1)" border-radius="10"
			:show-confirm-button="false">
			<view class="p-30 text-center pop-result">
				<view class="flex row-center">
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gou2.png')" width="300" height="300"
						mode="widthFix" v-if="alertRes.status"></u-image>
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gantan-rejust.png')" width="300"
						height="300" mode="widthFix" v-else></u-image>
				</view>

				<view class="title m-t-20">{{alertRes.title}}</view>
				<view class="desc m-t-10">{{alertRes.desc}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		apiWithdrawApply
	} from "@/api/user.js";
	import {
		apiWithdrawGetConfig,
	} from "@/api/cloudshop";
	import {
		currentPage,
	} from "@/utils/tools";
	export default {
		data() {
			return {
				list: [],
				current: 0,

				withdrawData: {
					able_withdraw: 2, //可提现
					min_withdraw: '', //最小提现金额
					max_withdraw: '', //最大提现金额
					percentage: '', //提现手续百分比
					type: [] //提现类型
				},

				withdraw: {
					type: [], //提现类型
					money: '', //提现余额
					account: '', //收款账户
					real_name: '', //真实姓名
					apply_remark: '', //备注
					money_qr_code: '', //收款码
					bank: '', // 提现银行
					subbank: '' //支行银行卡
				},
				clsp_id: '',
				alertRes: {
					status: 1,
					title: '',
					desc: ''
				},
				showResult: false,
			}
		},

		methods: {
			change(event) {
				this.current = event;
			},

			// 获取提现基础数据
			getWithdrawData() {
				apiWithdrawGetConfig({
					store_id: this.clsp_id
				}).then(res => {
					this.withdrawData = this.$zhTran(res);
				})
			},

			// 提现
			withdrawFun() {
				if (this.withdraw.money == '') return this.$toast({
					title: this.$zhTran('请输入提现金额')
				})
				const params = {
					type: this.withdrawData.type[this.current].value, //提现类型
					money: this.withdraw.money, //提现余额
					account: this.withdraw.account, //收款账户
					real_name: this.withdraw.real_name, //真实姓名
					apply_remark: this.withdraw.apply_remark, //备注
					money_qr_code: this.withdraw.money_qr_code.toString(), //收款码
					bank: this.withdraw.bank, // 提现银行
					subbank: this.withdraw.subbank, //支行银行卡
					clsp_id: this.clsp_id
				}
				apiWithdrawApply({
						...params
					})
					.then(res => {
						this.withdraw.money = ''
						this.alertRes = {
							status: 1,
							title: '申请成功',
							desc: '您的申请已提交，请耐心等待审核'
						}
						this.alertRes = this.$zhTran(this.alertRes)
						this.showResult = true
					})
			},
			backPage() {
				this.$Router.back(1, {
					success: () => {
						const {
							onLoad,
							options
						} = currentPage();
						// 刷新上一个页面
						onLoad && onLoad(options);
					},
				});
			}
		},

		onLoad() {
			const {
				clsp_id
			} = this.$Route.query
			this.clsp_id = clsp_id
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},
		onShow() {
			this.getWithdrawData();
		}
	}
</script>

<style lang="scss">
	.withdraw {
		padding: 30rpx;

		.withdraw-header {
			padding: 10rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
		}

		.withdraw-other {
			padding: 24rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
		}

		.withdraw-content {
			width: 100%;
			height: 350rpx;
			padding: 66rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;

			.input {
				padding: 24rpx 0;
				font-size: 46rpx;
				border-bottom: 1rpx solid #E5E5E5;

				input {
					padding-left: 30rpx;
					font-size: 66rpx;
					height: 80rpx;
				}
			}

			.tips {
				color: rgba(64, 115, 250, 1);
			}

			.all-withdraw {
				color: rgba(64, 115, 250, 1);
			}
		}

		.withdraw-btn {
			width: 100%;
			height: 84rpx;
			margin-top: 60rpx;
			background-color: rgba(64, 115, 250, 1);
		}
	}

	.pop-result {
		.title {
			font-size: 32rpx;
			color: rgba(38, 38, 38, 1);
		}

		.desc {
			font-size: 24rpx;
			color: rgba(166, 166, 166, 1);
		}
	}
</style>